<template>
    <view>
        <custom-navbar title="投递进度" :autoBack="true" leftIconColor="#303133" />
      <view
        class="drop-down mb-30rpx h-88rpx flex items-center justify-between bg-#fff px-74rpx text-28rpx"
      >
        <view
          v-for="item in menu"
          :key="item.type"
          class="flex items-center "
          @tap="showPopup(item)"
        >
          <text class="mr-8rpx pb-8rpx">
            {{ item.name }}
          </text>
          <up-icon color="#4e5969" size="16rpx" name="arrow-down-fill" />
        </view>
      </view>
      <JobList :job-list="res" />
      <up-popup
        :show="popupData.show"
        mode="center"
        :safe-area-inset-bottom="false"
        bg-color="transparent"
        @close="close"
        @open="open"
      >
        <view class="w-662rpx overflow-hidden rounded-24rpx bg-#fff">
          <view class="relative h-106rpx flex items-center justify-end px-24rpx">
            <text
              class="absolute left-50% top-50% translate-[-50%] text-center text-[28rpx] text-[#1d2129] font-medium"
            >
              {{ popupData.title }}
            </text>
            <up-icon
              :name="PopupClose"
              color="#f2f2f2"
              size="44rpx"
              @tap="popupData.show = false"
            />
          </view>
          <view>
          </view>
        </view>
      </up-popup>
    </view>
  </template>

  <script setup lang="ts">
  // import PopupClose from '@/static/images/common/popup-close.png';
  import JobList from '@/pages/components/jobList/index.vue';
  import { userJobInteractionList, userJobResumeList } from '@/api/user';
  import {customerJobResumeList} from '@/api/user/customer';
  // import home06 from "@/static/images/tab/home-06.png";
  // import home10 from "@/static/images/tab/home-10.png";
  const PopupClose = 'https://yiliao.test03.qcw800.com/static/images/common/popup-close.png'
  const home06 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-06.png'
  const home10 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-10.png'

  const options = ref<Record<string, string>>({});

  interface MenuItem {
    type: string;
    name: string;
    showPopup: boolean;
  }

  const menu = ref<Array<MenuItem>>([
    {
      name: '全部',
      type: '1',
      showPopup: true,
    },
    {
      name: '投递进度',
      type: '2',
      showPopup: true,
    }
  ]);
  type List = { name: string; children: { name: string }[] }[];
  // 城市列表
  const cityList = [
    {
      name: '热门城市',
      children: [
        {
          name: '全国',
        },
        {
          name: '上海',
        },
        {
          name: '重庆',
        },
      ],
    },
    {
      name: '北京',
      children: [
        {
          name: '北京一区',
        },
        {
          name: '北京二区',
        },
        {
          name: '北京三区',
        },
        {
          name: '北京三区',
        },
        {
          name: '北京三区',
        },
        {
          name: '北京三区',
        },
        {
          name: '北京三区',
        },
        {
          name: '北京三区',
        },
        {
          name: '北京三区',
        },
      ],
    },
    {
      name: '天津',
      children: [
        {
          name: '天津一区',
        },
        {
          name: '天津二区',
        },
        {
          name: '天津三区',
        },
      ],
    },
    {
      name: '河北',
      children: [
        {
          name: '河北一区',
        },
        {
          name: '河北二区',
        },
        {
          name: '河北三区',
        },
      ],
    },
  ];
  // 职位分类列表
  const classificationList = [
    {
      name: '不限',
      children: [
        {
          name: '全部',
        },
        {
          name: '临床试验',
        },
        {
          name: '临床研究',
        },
      ],
    },
    {
      name: '临床试验',
      children: [
        {
          name: '临床试验一区',
        },
        {
          name: '临床试验二区',
        },
        {
          name: '临床试验三区',
        },
        {
          name: '临床试验三区',
        },
        {
          name: '临床试验三区',
        },
        {
          name: '临床试验三区',
        },
        {
          name: '临床试验三区',
        },
        {
          name: '临床试验三区',
        },
        {
          name: '临床试验三区',
        },
      ],
    },
    {
      name: '医学产品研发',
      children: [
        {
          name: '医学产品研发一区',
        },
        {
          name: '医学产品研发二区',
        },
        {
          name: '医学产品研发三区',
        },
      ],
    },
    {
      name: '医学总查',
      children: [
        {
          name: '医学总查一区',
        },
        {
          name: '医学总查二区',
        },
        {
          name: '医学总查三区',
        },
      ],
    },
  ];
  const secondaryCategoryList = ref<List>([]);
  const popupData = reactive({
    show: false,
    title: '',
    menuType: '',
  });
  const showPopup = (item: MenuItem) => {
    if (item.showPopup) {
      popupData.title = item.name;
      popupData.menuType = item.type;
      popupData.show = true;
      if (item.type === '1') {
        secondaryCategoryList.value = cityList;
      }
      if (item.type === '2') {
        secondaryCategoryList.value = classificationList;
      }
    }
  };
  const close = () => {};
  const open = () => {};


  const res:any = reactive([]);
  async function getJobResumeList() {
    let params = {}
    let r = await customerJobResumeList(params, '投递进度');
    r.jobResumeList.forEach(item => {
      res.push(item)
    })
  }
  onLoad((params: any) => {
    options.value = params;
    getJobResumeList()
  });
  </script>

  <style scoped lang="scss"></style>
